<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div class="login-box">
        <img src="@/assets/logo.png" alt="">
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 主体内容区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse? '64px':'200px'">
        <div @click="btnTaggle">|||</div>
        <Aside :collapse="isCollapse"/>
      </el-aside>
      <!-- 右侧主体内容 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Aside from '@/views/Aside'

export default {
  data () {
    return {
      isCollapse: false
    }
  },

  components: {
    Aside
  },

  created () {

  },

  methods: {
    // 点击退出按钮
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    btnTaggle () {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>

<style scoped lang="less">
.home-container {
  height: 100%;

  .el-header {
    background: #373d41;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;

    .login-box {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 24px;

      > span {
        margin-left: 8px;
      }
    }
  }

  .el-aside {
    background: #333744;

    > div {
      color: #fff;
      font-size: 16px;
      white-space: 0.4rem;
      text-align: center;
      cursor: pointer;
    }
  }

  .el-main {
    background: #eaedf1;
  }
}
</style>
